<template>
  <div class="community-home">
    <!-- 热门推荐区域 -->
    <section class="featured-section">
      <h2 class="section-title">
        <i class="fas fa-fire"></i>
        热门推荐
      </h2>
      <div class="featured-grid">
        <div 
          v-for="post in featuredPosts" 
          :key="post.id"
          class="featured-card"
          @click="viewPost(post)"
        >
          <div class="card-cover">
            <img :src="post.cover" :alt="post.title">
            <div class="card-category">{{ post.category }}</div>
          </div>
          <div class="card-content">
            <h3 class="card-title">{{ post.title }}</h3>
            <p class="card-excerpt">{{ post.excerpt }}</p>
            <div class="card-meta">
              <div class="author">
                <el-avatar :src="post.author.avatar" :size="24"></el-avatar>
                <span>{{ post.author.name }}</span>
              </div>
              <div class="stats">
                <span><i class="fas fa-eye"></i> {{ post.views }}</span>
                <span><i class="fas fa-comment"></i> {{ post.comments }}</span>
                <span><i class="fas fa-heart"></i> {{ post.likes }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术专栏 -->
    <section class="tech-columns">
      <h2 class="section-title">
        <i class="fas fa-book"></i>
        技术专栏
      </h2>
      <div class="columns-grid">
        <div 
          v-for="column in techColumns" 
          :key="column.id"
          class="column-card"
        >
          <div class="column-header">
            <el-avatar :src="column.author.avatar" :size="48"></el-avatar>
            <div class="column-info">
              <h3>{{ column.title }}</h3>
              <p>{{ column.description }}</p>
            </div>
          </div>
          <div class="column-stats">
            <div class="stat">
              <div class="stat-value">{{ column.articles }}</div>
              <div class="stat-label">文章</div>
            </div>
            <div class="stat">
              <div class="stat-value">{{ column.subscribers }}</div>
              <div class="stat-label">订阅</div>
            </div>
            <div class="stat">
              <div class="stat-value">{{ column.views }}</div>
              <div class="stat-label">阅读</div>
            </div>
          </div>
          <button class="subscribe-btn" @click="subscribeColumn(column)">
            <i class="fas fa-plus"></i>
            订阅专栏
          </button>
        </div>
      </div>
    </section>

    <!-- 活跃用户 -->
    <section class="active-users">
      <h2 class="section-title">
        <i class="fas fa-users"></i>
        活跃达人
      </h2>
      <div class="users-grid">
        <div 
          v-for="user in activeUsers" 
          :key="user.id"
          class="user-card"
          @click="viewProfile(user)"
        >
          <div class="user-header">
            <el-avatar :src="user.avatar" :size="64"></el-avatar>
            <div class="user-badges">
              <span 
                v-for="badge in user.badges" 
                :key="badge.id"
                class="badge"
                :title="badge.name"
              >
                <i :class="badge.icon"></i>
              </span>
            </div>
          </div>
          <div class="user-info">
            <h3>{{ user.name }}</h3>
            <p>{{ user.title }}</p>
          </div>
          <div class="user-stats">
            <div class="stat">
              <div class="stat-value">{{ user.articles }}</div>
              <div class="stat-label">文章</div>
            </div>
            <div class="stat">
              <div class="stat-value">{{ user.followers }}</div>
              <div class="stat-label">粉丝</div>
            </div>
            <div class="stat">
              <div class="stat-value">{{ user.likes }}</div>
              <div class="stat-label">获赞</div>
            </div>
          </div>
          <div class="user-tags">
            <span 
              v-for="tag in user.tags" 
              :key="tag"
              class="tag"
            >{{ tag }}</span>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'CommunityHome',
  
  data() {
    return {
      featuredPosts: [
        {
          id: 1,
          title: '深入理解Vue3响应式原理',
          excerpt: '本文将详细介绍Vue3中的响应式系统实现原理，包括Proxy的使用、依赖收集等核心概念...',
          cover: 'https://picsum.photos/600/300?random=1',
          category: '前端开发',
          author: {
            name: '张三',
            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dev1'
          },
          views: 1234,
          comments: 56,
          likes: 789
        },
        // ... 更多文章数据
      ],
      
      techColumns: [
        {
          id: 1,
          title: 'Vue.js进阶之路',
          description: '从入门到精通的Vue.js技术专栏',
          author: {
            name: '李四',
            avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dev2'
          },
          articles: 45,
          subscribers: 1234,
          views: 56789
        },
        // ... 更多专栏数据
      ],
      
      activeUsers: [
        {
          id: 1,
          name: '王五',
          title: '高级前端工程师',
          avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dev3',
          badges: [
            { id: 1, name: '优秀作者', icon: 'fas fa-crown' },
            { id: 2, name: '技术专家', icon: 'fas fa-star' }
          ],
          articles: 67,
          followers: 890,
          likes: 3456,
          tags: ['Vue.js', 'React', 'TypeScript']
        },
        // ... 更多用户数据
      ]
    }
  },
  
  methods: {
    viewPost(post) {
      this.$router.push(`/community/post/${post.id}`);
    },
    
    subscribeColumn(column) {
      // 实现订阅逻辑
      console.log('订阅专栏:', column.id);
    },
    
    viewProfile(user) {
      this.$router.push(`/community/user/${user.id}`);
    }
  }
}
</script>

<style scoped>
.community-home {
  padding: 2rem;
}

/* 通用样式 */
.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a237e;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-title i {
  color: #4285f4;
}

/* 热门推荐区域 */
.featured-section {
  margin-bottom: 3rem;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.featured-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.featured-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-cover {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.featured-card:hover .card-cover img {
  transform: scale(1.1);
}

.card-category {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  font-size: 0.9rem;
  color: #1a237e;
}

.card-content {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a237e;
  margin-bottom: 0.75rem;
}

.card-excerpt {
  color: #666;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
}

.stats {
  display: flex;
  gap: 1rem;
  color: #666;
  font-size: 0.9rem;
}

/* 技术专栏 */
.tech-columns {
  margin-bottom: 3rem;
}

.columns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.column-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.column-header {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.column-info h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a237e;
  margin-bottom: 0.5rem;
}

.column-info p {
  color: #666;
  font-size: 0.9rem;
}

.column-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}

.stat {
  text-align: center;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a237e;
}

.stat-label {
  font-size: 0.9rem;
  color: #666;
}

.subscribe-btn {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  background: #1a237e;
  color: white;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.subscribe-btn:hover {
  background: #0d47a1;
  transform: translateY(-2px);
}

/* 活跃用户 */
.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.user-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.user-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.user-header {
  position: relative;
  margin-bottom: 1rem;
}

.user-badges {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.5rem;
}

.badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd700;
}

.user-info h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a237e;
  margin-bottom: 0.25rem;
}

.user-info p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.user-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.tag {
  padding: 0.25rem 0.75rem;
  background: #f0f2f5;
  border-radius: 20px;
  font-size: 0.8rem;
  color: #666;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .community-home {
    padding: 1rem;
  }

  .featured-grid,
  .columns-grid,
  .users-grid {
    grid-template-columns: 1fr;
  }
}
</style> 